<template>
  <div>
    <div class="table-data" v-show="tabShow"
    >
      <div class="search-box">
        <el-input size="small" v-model="searchMap.keyword " placeholder="企业名称"></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button size="small" type="primary"  @click="handleConfirm">确认修改</el-button>
      </div>
      <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="headClass" :height="tHeight"  style="width:100%"  class="table-box">
        <el-table-column label="id" width="80" prop="id"></el-table-column>
        <el-table-column label="企业名称" width="180" prop="name"></el-table-column>
        <el-table-column label="联系人" width="120" prop="link_name"></el-table-column>
        <el-table-column label="协议折扣" width="100">
            <template slot-scope="scope">
                <el-input  v-model="scope.row.treaty_rebate" @change="changeTreatyRebate(scope.row.id,scope.row.treaty_rebate)"> </el-input>
            </template>
        </el-table-column>
        <el-table-column label="企业邀请码" prop="invitation_code"></el-table-column>
        <el-table-column label="联系电话" width="140" prop="phone"></el-table-column>
        <el-table-column label="商城消费" width="120" prop=""></el-table-column>
        <el-table-column label="收银台消费" prop=""></el-table-column>
        <el-table-column label="可消费储值" prop="amount"></el-table-column>
        <el-table-column label="总储值" prop=""></el-table-column>
        <el-table-column label="企业用户数" prop="member_count"></el-table-column>
        <el-table-column label="创建时间" prop="create_time"></el-table-column>
    
      </el-table>
      <div class="pages" ref="page-box">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
      </div>
    </div>
    <router-view @loadData="loadData" :tabShow="tabShow"></router-view>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import companyApi from "@/api/company";
@Component({
  components: { }
})
export default class businessList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() state: string = "1"; // 状态默认值
  @Provide() tableData: any = []; // 表格数据
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() status: number = 0;//禁用状态
  @Provide() treaty_rebate: any = 0;
  @Prop({}) tabVisible!: any;
  @Provide() searchMap:{
    keyword: string
  }={
    keyword: "",
  }
  @Provide() treatyRebateData: any = [];
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/companyList'){
      this.tabShow=this.tabVisible;
    }
  }

  headClass() {return "text-align: center;background:#eef1f6;";}

  created() {
    this.loadData();
    if(this.$route.path!='/companyList'){
      this.tabShow=false
    }
  }

  loadData() {
    companyApi.list(this.page,this.size,this.searchMap)
      .then((res: any) => {
        this.tableData = res.data.data.list;
        
        this.total = res.data.data.total;
        
        this.loading=false
      });
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }

  changeTreatyRebate(id,val){
    if (val >= 1 ) {
      this.$message({
        message: '协议折扣在0.00-0.99之间',
        type: "error"
      });
       return false;
    }
  }

  handleSearch(): void {
    // 点击搜索
  this.page = 1;
  this.loadData();
  }


  // 协议折扣保存
  handleConfirm() {
    this.tableData.forEach((item:any)=>{
      this.treatyRebateData.push({id:item.id,rebate: item.treaty_rebate});
    });
    this.$confirm('确认更新企业协议折扣', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal:false
    }).then(() => {
      companyApi.changeTreatyRebate(this.treatyRebateData).then(ret => {
        if (ret.data.code != 200) {
          this.$message({
            message: ret.data.msg,
            type:'error'
          })
        } else {
          this.$message({
            message: '修改成功',
            type:'success'
          })
          this.loadData();
        }
      })
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消'
      });
    });

  }

}
</script>

<style lang="scss" scoped>
.el-date-editor{
  margin-right: 10px;
}
</style>
